<template>
  <div class="page-bar">
    <ul>
      <li v-if="cur>1"><a @click="cur--,pageClick()">上一页</a></li>
      <li v-if="cur==1"><a class="banclick">上一页</a></li>
      <li v-for="index in indexs" :class="{ 'active': cur == index}">
        <a @click="btnClick(index)">{{ index }}</a>
      </li>
      <li v-if="cur!=all"><a @click="cur++,pageClick()">下一页</a></li>
      <li v-if="cur == all"><a class="banclick">下一页</a></li>
      <li><a>共<i>{{all}}</i>页</a></li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: {
      all: {
        type: Number,
      }
    },
    data() {
      return {
        cur: 1
      }
    },
    methods: {
      /*页码点击事件*/
      btnClick: function (data) {
        if (data != this.cur) {
          this.cur = data;
          this.$emit('returnValue', this.cur);
        }
      },
      /*当前页码*/
      pageClick: function () {
        this.$emit('returnValue', this.cur);
      }
    },
    computed: {
      indexs: function () {
        let left = 1;
        let right = this.all;
        let ar = [];
        if (this.all >= 5) {
          if (this.cur > 3 && this.cur < this.all - 2) {
            left = this.cur - 2;
            right = this.cur + 2
          } else {
            if (this.cur <= 3) {
              left = 1;
              right = 5
            } else {
              right = this.all;
              left = this.all - 4
            }
          }
        }
        while (left <= right) {
          ar.push(left);
          left++
        }
        return ar
      }
    }
  }
</script>

<style scoped>
  .page-bar {
    width: 355px;
    height: 40px;
    margin: 0 auto;
    padding-top: 30px;
  }

  ul, li {
    margin: 0;
    padding: 0;
  }

  li {
    list-style: none
  }

  .page-bar li:first-child > a {
    margin-left: 0
  }

  .page-bar a {
    border: 1px solid #ddd;
    text-decoration: none;
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #000;
    cursor: pointer
  }

  .page-bar a:hover {
    background-color: #eee;
  }

  .page-bar a.banclick {
    cursor: not-allowed;
  }

  .page-bar .active a {
    color: #000;
    cursor: default;
    background-color: #337ab7;
  }

  .page-bar i {
    font-style: normal;
    color: #d44950;
    margin: 0 4px;
    font-size: 12px;
  }
</style>
